<template>
  <view class="container">
    <view class="form">
      <view class="item">
        <view class="label">姓名</view>
        <input v-model="form.accountHolder" placeholder="请输入持卡人姓名" />
      </view>
      <view class="item">
        <view class="label">开户行</view>
        <input
          v-model="form.branchName"
          type="text"
          placeholder="请输入开户行"
        />
      </view>
      <view class="item">
        <view class="label">开户网点</view>
        <input
          v-model="form.bankName"
          type="text"
          placeholder="请输入开户网点"
        />
      </view>
      <view class="item">
        <view class="label">银行卡号</view>
        <input
          v-model="form.cardNumber"
          type="number"
          placeholder="请输入银行卡号"
        />
      </view>
      <view class="btn" @click="sumbit">提交</view>
    </view>
  </view>
</template>

<script>
import { mapState } from "vuex"
import api from "@/api"
export default {
  data() {
    return {
      form: {
        accountHolder: "", //姓名
        cardNumber: "",
        branchName: "",
        bankName: "",
      },
      isUpdate: false,
      // Your data here
    }
  },
  computed: {
    ...mapState({
      userId: (state) => state.user.userId,
    }),
    title() {
      return this.isUpdate ? "修改银行卡" : "添加银行卡"
    },
  },
  onLoad(options) {
    if (options.data) {
      this.setFrom(this.$getQ(options.data))
      this.isUpdate = true
      uni.setNavigationBarTitle({
        title: "修改银行卡",
      })
    } else {
      this.isUpdate = false
      this.resetForm()
    }
  },
  methods: {
    // Your methods here
    resetForm() {
      this.form = {
        accountHolder: "",
        cardNumber: "",
        branchName: "",
        bankName: "",
      }
    },
    setFrom(data) {
      this.form = { ...data }
    },
    sumbit() {
      this.form.userId = this.userId
      if (this.isUpdate) {
        this.handleUpdate()
      } else {
        this.handleAdd()
      }
    },
    toBankList() {
      uni.navigateTo({
        url: "/pages/wallet/bankcard/index",
      })
    },
    handleUpdate() {
      console.log(this.form)
      const cardRegex = /^\d{16,19}$/
      if (!this.form.accountHolder) {
        this.$toast("请输入持卡人姓名")
        return
      }
      if (!this.form.branchName) {
        this.$toast("请输入开户行")
        return
      }
      if (!this.form.bankName) {
        this.$toast("请输入开户网点")
        return
      }
      if (!this.form.cardNumber) {
        this.$toast("请输入银行卡号")
        return
      }
      if (!cardRegex.test(this.form.cardNumber)) {
        this.$toast("请输入正确的银行卡号")
        return
      }
      api.bankcard.update(this.form).then((res) => {
        if (res.code === 200) {
          uni.showToast({
            title: "修改成功",
            icon: "success",
          })
          this.toBankList()
        }
      })
    },
    handleAdd() {
      const cardRegex = /^\d{16,19}$/
      if (!this.form.accountHolder) {
        this.$toast("请输入持卡人姓名")
        return
      }
      if (!this.form.branchName) {
        this.$toast("请输入开户行")
        return
      }
      if (!this.form.bankName) {
        this.$toast("请输入开户网点")
        return
      }
      if (!this.form.cardNumber) {
        this.$toast("请输入银行卡号")
        return
      }
      if (!cardRegex.test(this.form.cardNumber)) {
        this.$toast("请输入正确的银行卡号")
        return
      }
      api.bankcard.add(this.form).then((res) => {
        if (res.code == 200) {
          uni.showToast({
            title: "添加成功",
            icon: "success",
          })
          this.toBankList()
        }
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.container {
  height: 100vh;
  background: #f7f7f7;
  padding-top: 30rpx;
  .title {
    font-size: 36rpx;
    font-weight: bold;
    text-align: center;
    padding: 100rpx 0;
  }
  .form {
    padding: 0 30rpx;
    margin: 0 0 50rpx;
    .item {
      box-sizing: border-box;
      display: flex;
      align-items: center;
      width: 100%;
      height: 100rpx;
      background: #fff;
      border-radius: 10rpx;
      margin-bottom: 30rpx;
      padding: 0 20rpx;
      font-size: 30rpx;
      .label {
        width: 180rpx;
      }
      input {
        flex: 1;
      }
    }

    .btn {
      margin-top: 50rpx;
      font-size: 32rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 80rpx;
      color: #fff;
      background: #23ac39;
      border-radius: 20rpx;
    }
  }
}
</style>
